<template>
  <div class="pageThree">
    <h1>{{ $t('page3.title') }}</h1>

    <div class="leftBox">
      <dv-border-box-13 class="top1">
        <span class="span3">{{ $t('page3.device_efficiency_trend') }}</span>
        <leftBox2 :key="updateKey"></leftBox2>
      </dv-border-box-13>
      <dv-border-box-12 class="rtableBox">
        <div class="span span2">{{ $t('page3.work_order_attainment_rate') }}</div>
        <rightcenterBox2 :key="updateKey"></rightcenterBox2>
      </dv-border-box-12>
      <div class="rightbox">
        <!-- <div class="span" style="margin: -10px 0 0 39%">{{ $t('page3.ongoing_work_orders') }}</div> -->
        <rightBox :key="updateKey"></rightBox>
      </div>
    </div>

    <div class="rightcenterBox">
      <div class="tableBox">
        <span>{{ $t('page3.cnc_workshop_capacity') }}</span>
        <leftCenterBox3 @data-child="DataChild" :key="updateKey"></leftCenterBox3>
      </div>
      <div class="cBox">
        <div class="span5">{{ $t('page3.cam_workshop_capacity') }}</div>
        <rightcenterBox4 @data-child="DataChild"  :key="updateKey"></rightcenterBox4>
      </div>
      <div class="rbarBox">
        <div class="span span1">{{ $t('page3.workshop_two_capacity') }}</div>
        <rightcenterBox3 @data-child="DataChild"  :key="updateKey"></rightcenterBox3>
      </div>
    </div>
    <div class="mask" v-show="detailsVivsible">
      <img
        class="img"
        src="@/assets/img/cancel.png"
        @click="detailsVivsible = false"
      />
      <weekendShow
        class="details"
        :parentDatax="parentDatax"
        :parentDatay="parentDatay"
        :title="title"
        :key="updateKey"
      ></weekendShow>
    </div>
  </div>
</template>

<script>
import leftBox2 from "../components/fakeCompt/totalFake/leftBox2.vue";
import leftCenterBox3 from "../components/fakeCompt/totalFake/leftCenterBox3.vue";
import rightcenterBox3 from "../components/fakeCompt/totalFake/rightCenterBox3.vue";
import rightcenterBox2 from "../components/fakeCompt/totalFake/rightCenterBox2.vue";
import rightcenterBox4 from "../components/fakeCompt/totalFake/rightCenterBox4.vue";
import rightBox from "../components/fakeCompt/totalFake/rightBox.vue";
import weekendShow from "../components/fakeCompt/totalFake/weekendShow.vue";
export default {
  name: "pageThreeFake",
  components: {
    leftBox2,
    leftCenterBox3,
    rightcenterBox3,
    rightcenterBox2,
    rightBox,
    rightcenterBox4,
    weekendShow,
  },
  data() {
    return {
      detailsVivsible: false,
      parentDatax: [],
      parentDatay: [],
      title: "",
      updateKey: 1,
    };
  },
  watch: {
    '$i18n.locale': {
      handler(newLocale) {
        this.$nextTick(() => {
       this.updateKey += 1;
    });
      },
      immediate: true, // 立即执行一次
    },
  },
  methods: {
    //接受子传的数据
    DataChild(datay, datax, title) {
      this.parentDatay = datay;
      this.parentDatax = datax;
      this.title = title;
      this.detailsVivsible = true;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
h1 {
  position: relative;
  color: #9be5fb;
  font-size: 2rem;
  width: 33%;
  font-weight: 700;
  margin: 0 auto;
  margin-top: -40px;
  text-align: center;
  z-index: 9999;
  letter-spacing: 3px;

}
.pageThree {
  z-index: 999;
  width: 100%;
  height: 100%;
  padding: 0 35px;
  // display: flex;
}
span {
  font-size: 16px;
  margin-left: 325px;
  font-weight: 700;
  line-height: 50px;
}
.span {
  // text-align: center;
  font-size: 16px;
  margin-right: 20px;
  margin-bottom: -10px;
  line-height: 34px;
  font-weight: 700;
}
.span1 {
  margin: 0px 0px 0px 90px;
  line-height: 50px;
}
.span2 {
  position: absolute;
  font-weight: 700;
  margin: -30px 0px 0 180px;
}
.span3 {
  position: absolute;
  margin: -40px 0px 0 70px;
  font-weight: 700;
}
.span5 {
  font-weight: 700;
  margin: -35px 0 0 230px;
}
.leftBox {
  width: 100%;
  height: 45vh;
  margin-left: 10px;
  margin-top: 1.8%;
  display: flex;
  flex-direction: row;
  align-items: end;
}
.top1 {
  height: 45vh;
  width: 900px;
  padding: 15px 0 0 0;
  // margin-bottom: 8px;
}
.rightbox {
  width: 520px;
  height: 44vh;
}
.rtableBox {
  width: 480px;
  height: 44vh;
  padding: 8px;
}

.rightcenterBox {
  width: 100%;
  height: 43vh;
  margin: 10px 0 0 12px;
  display: flex;
  flex-direction: row;
  align-items: end;
}
.tableBox {
  width: 600px;
  height: 44vh;
  padding: 10px 8px 20px 8px;
  // margin-top: -30px;
  background: url("~@/assets/img/center3.png") no-repeat;
  background-size: 100% 100%;
}
.cBox {
  width: 600px;
  height: 39vh;
  padding: 10px 0px 8px 8px;
  border: 1px solid #414681;
  box-shadow: #414681 0 0 6px;
  margin: 0px 5px 8px;
}
.rbarBox {
  width: 600px;
  height: 44vh;
  padding: 10px 8px 0px 15px;
  // margin-bottom: 20px;
  background: url("~@/assets/img/center4.png") no-repeat;
  background-size: 100% 100%;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  .details {
    margin-left: 22%;
    margin-top: 12%;
    z-index: 10001;
  }
  .img {
    width: 80px;
    height: 80px;
    position: absolute;
    margin-left: 78%;
    margin-top: 10%;
    z-index: 10002;
  }
}
</style>
